Глава 10.
Изображения-карты.

 Предварительные замечания.
 Использование изображений-карт, обслуживаемых сервером.
 Использование изображений-карт, обслуживаемых браузером.
 Работа с программами, создающими изображения-карты.
 Альтернативы страницам с изображениями-картами.
 Практический пример создания изображения-карты.

    Сегодня многие Web-страницы располагают интересной разновидностью меню – изображениями-картами, т.е. изображениями, чувствительными к нажатию кнопки мыши (imagemaps – от англ. слов image – изображение и map – карта, план.). Они обычно связаны с определенными HTML-документами или другими ресурсами Internet. Начальные страницы многих их сайтов имеют такую разновидность графического меню. На одних страницах оно служит иллюстрированным оглавлением материалов сайта, на других - представлено в виде панели навигационных инструментов. Хороший пример такого графического меню можно найти на сайте компании Hewlett Packard по адресу http://www.hp.com.
    Вы можете подумать, что включение изображения-карты в документ потребует большой работы. Когда-то это было действительно так. Теперь эта задача значительно упростилась. Это просто детская игра по сравнению с другими задачами, решаемыми вами как программистом Web-сайта. Удачное изображение-карта может сделать ваш сайт заметным явлением во Всемирной паутине. Однако этим меню свойственны и определенные недостатки, которым ниже также будет уделено внимание.

Предварительные замечания.
    Так как в изображениях-картах используется, как правило, интуитивно понятная графика, они представляют дружественный пользователю интерфейс для быстрой связи с другими документами или ресурсами Сети. С тех пор как WWW стал применяться язык HTML, появилась возможность простой передачи и вывода изображений. Прежние стандарты были основаны на передаче текстовой информации (Gopher, WAIS и FTP). Хотя они и предполагали передачу файлов изображений, возможность их отображения не была встроена в эти системы (рис. 10.1).

http://www.compaq.com
Рис. 10.1. Пользоваться понятными графическими ссылками значительно проще даже грамотным людям.

    Разные части изображения на странице могут быть связаны с разными URL-адресами. Так как пользователь должен знать, где расположены "чувствительные" области изображения, они часто выделяются рамками, тоже являющимися частью изображения (рис 10.2).
    Изображения-карты бывают двух типов: обслуживаемые сервером и программой-клиентом (браузером). Они работают следующим образом:

http://home.netscape.com/entertainment
Отдельные области изображения-карты.
Рис. 10.2. При применении в документе изображения-карты нужно быть уверенным, что пользователь легко отличит его области друг о друга.

Обслуживание сервером.
    Когда пользователь нажимает кнопку мыши, программа просмотра посылает координаты указателя мыши Web-серверу, который по ним определяет URL-адрес и возвращает его браузеру. Располагая адресом, браузер связывается с нужным документом или ресурсом Сети.

Обслуживание клиентом.
    При создании страницы автор определяет чувствительные к нажатию кнопки мыши области. Когда кнопка нажата, браузер устанавливает соответствующий координатам указателя URL-адрес и связывается с ним. Таким образом, в этом виде обслуживания изображения-карты сервер не участвует.

Когда нужно использовать изображение-карту.
    Во многих случаях целесообразнее предпочесть изображение-карту обычным гипертекстовым ссылкам. Использование такого меню оправдано в следующих ситуациях:

http://www.intuit.com
Чувствительная область, работающая как навигационное меню.
Рис. 10.3. Используя изображение-карту для навигации, пользователь без труда ознакомиться со всеми страницами вашего сайта.

Когда не нужно использовать изображение-карту.
    Хотя изображения-карты имеют ряд преимуществ, нередки ситуации, когда от него лучше отказаться:
Если ваш сервер не в состоянии правильно обслуживать изображения-карты. Вы можете получить бесплатную копию Microsoft Personal Web Server по адресу: http://www.microsoft.com.
    Если функционирование изображения-карты не может быть проверено без участия сервера. Это означает, что вы не можете протестировать меню на стадии разработки. Чтобы исправить ситуацию, вам нужно установить программу-сервер на своей машине, либо проверить работу изображения-карты на другом сервере.
    Если вы не забываете о пользователях неграфических браузеров. Часть пользователей Internet до сих пор работает с текстовыми программами просмотра. Еще больше читателей отключают загрузку изображений с целью увеличить скорость работы в Сети. Поэтому вы должны позаботиться об альтернативе изображению-карте (рис. 10.4).
    Если вы озабочены производительностью вашего сайта. В виду того, что изображения-карты могут быть большими, скорость их загрузки имеет не последнее значение (особенно для пользователей, имеющих медленные модемы). Передача графики может также сильно замедляться в часы максимальной нагрузки Сети.

http://www.fedex.com/ru/index.html
Рис. 10.4. Разработка альтернативной (текстовой) версии изображения-карты позволит не исключать из круга посетителей вашего сайта читателей, использующих неграфические браузеры или отключающих загрузку изображений.

Использование изображений-карт, обслуживаемых сервером.
    Для того чтобы встроить в свой документ изображение-карту, обслуживаемую сервером, вам потребуется наличие следующих компонентов:

Создание графики для изображения-карты.
    Приступая к работе над изображением-картой, в первую очередь вы должны позаботиться о графике. Если вы разрабатываете Web-сайт вашей компании, возможно, вы захотите использовать ее логотип или эмблему.
    Выбирая графику для изображения-карты, имейте в виду следующие соображения: Примечание:
    Если вы используете прозрачные изображения формата GIF, определяйте зону по умолчанию, как это будет показано ниже в этой главе. Когда применяются такие изображения, пользователь может быть введен в заблуждение, так как они не имеют видимых границ (рис. 10.5).

http://www.yahoo.com
В качестве изображения-карты используется прозрачная графика в формате GIF.
Рис. 10.5. Главное навигационное меню системы поиска информации Yahoo! выполнено в виде изображения-карты на основе прозрачной GIF-графики. Его недостаток в том, что пользователь порой не знает, находится ли указатель мыши в пределах той или иной зоны меню.

Файл, определяющий изображение-карту.
    Для создания изображения-карты, обслуживаемой сервером, недостаточно иметь красивую картинку. Вам потребуется файл, определяющий каждую зону изображения-карты.
    Этот файл может быть в двух форматах: CERN и NCSA. В обоих используются одинаковые координаты и типы зон. Разница лишь в виде представления данных. Поэтому вам необходимо уточнить у вашего системного администратора, какой формат поддерживает сервер.
    Все строки файла определения должны содержать URL-адреса (листинг 10.1). Адреса могут быть как абсолютными, так и относительными. Если вы используете относительную адресацию, URL-адреса должны указываться относительно каталога, в котором расположен файл определения, а не файл с графическим изображением.

Листинг 10.1. Пример файла, определяющего изображение-карту.

Формат CERN.
    Изначально Европейская лаборатория физики элементарных частиц (CERN) была организована как группа европейских исследователей физиков. Параллельно группа занималась и исследованиями в области компьютерных технологий. Идея создания Всемирной паутины принадлежит сотрудникам этой лаборатории, и поэтому CERN считается "местом рождения" WWW. Когда были изобретены изображения-карты, лаборатория CERN предложила свой формат файла-определения. На серверах, поддерживающих этот формат, можно найти файлы, содержащие строки следующего вида:

region_ type (x1, y1) (х2, y2) ... URL

    Горизонтальные (x1 и x2) и вертикальные (y1 и y2) координаты должны заключаться в скобки и разделяться запятыми. Многоточие обозначает дополнительные координаты, например, для зоны в виде многоугольника (poly-region) (см. "Типы зон изображения-карты" ниже в этой главе). Например, строка файла формата CERN может иметь следующий вид:

rect (60, 40) (340, 280) http://www.rectangle.com/

Формат NCSA.
    Первый популярный браузер, Mosaic, родился в стенах Национального центра по использованию суперкомпьютеров (NCSA) Иллинойского Университета. Когда пришло время изображений-карт, сотрудники центра предложили свой вариант файла-определения. Формат строки такого файла выглядит так:

region type URL x1, у1 х2, у2 ...

    Как вы видите, разница между двумя форматами невелика, но существенна. В формате NCSA URL-aдpec указывается впереди координат, а сами координаты не заключаются в скобки. Строка формата NCSA может выглядеть следующим образом:

rect http://www.rectangle.com/ 60,40 340,280

Примечание:
    Файл, определяющий изображение-карту, может содержать комментарии, обозначаемые символом #, расположенным в начале строки (см. листинг 10.1). Такая строка игнорируется программой просмотра. Комментарии могут быть полезны для включения в файл сведений о ссылках, об используемой графике, о дате последней модификации и т. д. (Формат CERN не допускает использование строк-комментариев.)

Типы зон изображения-карты.
    В каждой строке определяющего файла указывается тип зоны. Координаты зоны обозначаются в пикселах, начиная с верхнего левого угла зоны. Зоны представляют собой различные геометрические фигуры (рис. 10.6).

 Рис. 10.6. Разрешается комбинировать различные типы зон, а также задавать зону по умолчанию.

Примечание:
    Каждое изображение-карта должно иметь свой собственный файл-определение.

Прямоугольная зона.
    Для создания прямоугольной чувствительной зоны изображения-карты служит тип rect. В этом типе указываются координаты верхнего левого и нижнего правого углов зоны. Зона активизируется при щелчке мышью в её пределах. Ниже приведены примеры использования прямоугольной зоны в форматах NCSA и CERN, соответственно:

rect http://www.rectang1e.cnm/ 100,l00 120,120
rect (100,100) (120,120) http://www.rectangle.com/

Примечание:
    Если зоны изображения-карты частично накладываются друг на друга, в месте наложения имеет силу зона, определенная первой.

Многоугольная зона.
    Для создания такой фигуры используется тип poly. Он предусматривает указание до 100 координат, т. е. многоугольник может иметь соответствующее число вершин. Многоугольник должен быть замкнутым, иными словами, первая пара координат должна совпадать с последней. Чувствительная область находится внутри многоугольника. Определение многоугольной зоны в форматах NSCA и CERN выглядит следующим образом:

poly http://www.polygon.com/ 0,0 100,100 120,120 80, б0 40,50 10,10 0,0
poly (0,0) (100,100) (120,120) (80,60) (40,50) (10,10) (0,0)
http://xww.polygon.com/

Круглая зона.
    Для создания чувствительного круга используется тип circle. Способ указания координат здесь имеет свои особенности. В формате NCSA указываются координаты центра круга и одной из точек его окружности:

circle http://www.circle.com/ 100,100 150,150

    В формате CERN определяются координаты центра круга и его радиус:

circle (100,100) 50 http://www.circle.com/

Точечная зона.
    Для создания маленького чувствительного пятна используется тип point. Оно определяется одной парой координат:

point http://www.circle.com/ 88,65

Зона по умолчанию.
    Если пользователь, щелкнув мышью на изображении-карте, не попал ни в одну из зон, активизируется зона по умолчанию. Они не требует определения координат. Допустим, в файле-определении имеются все следующие строки:

rect http://www.rectangle.com/ 0,0 100,100
default http://www.rectangle.com/helpme

    Если пользователь активизирует прямоугольную зону, его браузер откроет http://www.rectangle.com. Напротив, если щелчок мыши не попадет в эту зону будет открыт документ http://www.rectangle.com/helpme так как он ассоциирован с зоной по умолчанию.

Предупреждение:
    Не сочетайте точечную зону с зоной по умолчанию, так как мимо первой легко промахнуться и связаться с документом, загружаемым по умолчанию. Используйте вместо точек небольшие круглые зоны.

Совет:
    Рекомендуется при определении изображения-карты не отказываться от зоны по умолчанию и связать ее с какой-либо полезной информацией, например, о том, как пользоваться изображением-картой.

Создание файла, определяющего изображение-карту.
    Эта операция является неотъемлемой частью работы над изображением-картой. Здесь есть два пути: простой и сложный. Первый заключается в использовании специальных приложений. Они позволяют размечать зоны и снабжать их URL-адресами непосредственно на выбранном вами изображении.
    Сложный путь заключается в самостоятельном написании файла-определения. Этот способ не столько трудный, сколько рутинный и скучный. Здесь нужно иметь под рукой две программы: графический и текстовый редакторы. Последовательность действий должна быть следующей:

Совет:
    Если вы намереваетесь создать несколько изображений-карт, во избежание путаницы рекомендуется хранить файлы каждого изображения-карты в отдельном каталоге, либо давать всем файлам, описывающим данное изображение-карту, одинаковые имена в соответствии с названием изображения, отличающиеся только расширением.

Использование программ CGI для отслеживания нажатий кнопки мыши.
    Как было сказано выше, для обеспечения работы ваших изображений-карт нужна программа CGI (Common Gate Interface, Общий шлюзовой интерфейс), установленная на сервере. Программа просмотра пользователя при щелчке мышью запускает эту программу и передает ей координаты указателя. Программа CGI, используя файл, определяющий изображение-карту, находит соответствующий координатам URL-aдpec и передает его обратно браузеру.
    В большинстве случаев программа для отслеживания координат мыши предоставляется провайдером услуг Internet.

Запуск программы CGI.
    В вашем HTML-документе строка, описывающая изображение-карту, может выглядеть, например, следующим образом:

<А HREF="http://www.myserver.com/cgi-bin/mapfile.map">
<IMG SRC="imagemap.gif" ISMAP></A>

    В  атрибуте HREF указана ссылка, но не на другую Web-страницу или ресурс Internet, а на изображение-карту. В зависимости от того, каким образом вы создаете изображение-карту, и как работает ваш провайдер, вы можете также добавлять или не добавлять ссылку на конкретную программу CGI. Когда пользователь активизирует чувствительную зону, координаты указателя обрабатываются программой CGI, и браузер получает от нее нужный URL-адрес.

Взаимодействие с провайдером услуг Internet.
    Большинство провайдеров при создании каталога для Web-сайта пользователя добавляют префикс (~) к его имени. Таким образом, для того чтобы изображение-карта работала, вы должны будете включить в документ строку такого вида:

<A HREF="/cgi-bin/imagemap/~username/image.map">
<IMG SRC="myimage.gif" ISMAP></A>

    Атрибут HREF указывает на /cgi-bin/imagemap/~username/image.map. Вместо username вы должны вставить свое имя, а вместо image.map – название файла изображения-карты. Имейте в виду, что у каждого провайдера могут быть свои требования к тому, как вы храните файлы изображений-карт. Например, провайдер автора требует хранить эти файлы в корневом каталоге домашней страницы, независимо от структуры самого сайта. Ваш провайдер может организовывать работу как-то иначе.

Размещение изображения-карты в HTML-документе.
    Теперь, когда вы знаете все об элементах изображения-карты, вы готовы к созданию Web-страницы. Из нее вы узнаете, как сделать изображение чувствительным к щелчку мыши. Все, что нужно для этого – включить тэг <IMG SRC> внутрь указателя ссылки, а адрес настроить на нужную Web-страницу.
Для того чтобы сделать изображение-каргу частью вашей страницы, необходимо выполнить два действия. Сначала указатель ссылки нужно направить на файл, определяющий изображение-карту. Затем к тэгу <IMG SRC> надо добавить атрибут ISMAP. Например, у вас есть файл-определение MAPFILE.MAP, а соответствующая ему графика хранится в файле IMAGEMAP.GIF. Тогда для размещения изображения-карты на страннице, включите в HTML-документ следующий код:

<А HRFF="http://www.myserver.com/cgi-bin/mapfile.map">
<IMG SRC=imagemap.gif ISMAP></A>

    Когда активизируется одна из зон изображения-карты, на сервере запускается программа CGI. Она сообщает браузеру нужный URL-адрес.

Примечание:
    Узнайте у своего провайдера, где будут размещаться файлы-определения. Это определяется конфигурацией сервера.

Примечание:
    Атрибут ISMAP может использоваться одновременно с другими атрибутами изображений. Применение изображений-карт не накладывает никаких ограничений на применение других параметров управления и настройки графики.

Тестирование изображения-карты.
    Встроив изображение-карту в страницу, нужно обязательно провести опробование. Хотя некоторые программы-ре факторы изображений-карт позволяют провести тестирование, его нельзя считать полноценным. Лучшим способом является размещение документов с изображением-картой на сервере и тестирование его с позиции рядового посетителя вашего сайта.
    Поступая таким образом, вы сможете обнаружить ошибки, допущенные на стадии разработки. Если графический файл слишком велик, его загрузка будет недопустимо медленной. Вы также проверите, являются ли чувствительные зоны понятными для среднего пользователя. И, наконец, вы убедитесь, верно ли работают все ваши ссылки. Это особенно важно, если вы используете относительную адресацию.

Совет:
    Держите под рукой программу-клиент FTP. Тогда при тестировании вы сможете быстро переключаться между текстовым редактором, программой FTP и браузером (не забывайте перезагружать страницу, если делаете изменения в графике).

    Перед тем как выпустить страницу с изображением-картой в свет, попросите протестировать ее еще кого-нибудь. Это должен быть пользователь, подключенный к Internet другим провайдером. Его непредвзятое мнение поможет вам навести окончательный глянец.

Использование изображений-карт, обслуживаемых программой-клиентом (браузером).
    До появления НТМL версии 3.2 клиентское обслуживание изображений-карт можно было осуществлять при помощи расширений программ Netscape Navigator и Internet Explorer. Теперь эта разновидность работы с изображениями-картами стала стандартом HTML.
    Клиентское обслуживание весьма схоже с обслуживанием сервером. Только вместо размещения файлов изображения-карты на сервере и использовании программы CGI, все необходимое вы имеете в своем НТМL-документе. Главное преимущество заключается в уменьшении загрузки Сети. Браузер сам справляется с определением URL-адреса нужного документа.

Определение изображения-карты, обслуживаемой клиентом.
    Вы не забыли о форматах NCSA и CERN? Используемая для определения информация останется прежней, только теперь мы будем работать с тэгами HTML. Синтаксис определения следующий:

<МАР NAME="mapname" >
<AREA [SHAPE="shape"] COORD="x,у,..." [HREF'="URL"] [NOHREF]>
</MAP>

    Определение начинается тэгом <МАР> и заканчивается тэгом </MAP>. Для того чтобы ссылаться на это определение позже в тэге <IMG>, оно должно иметь имя, задаваемое при помощи атрибута NAME.
    Для задания чувствительных областей используется тэг <AREA>. Как и раньше, указание координат начинается с левого верхнего угла. В таблице 10.1 описаны атрибуты тэга <AREA>.

Таблица 10.1.
Атрибут Описание
SHАРЕ Определяет форму чувствительной зоны. Имеет значения rect, poly, circle, default. Если этот атрибут не указан, подразумевается значение rect. При наложении двух зон действует значение, определенное первым.
COORDS В этом атрибуте перечисляются через запятую пары координат. Между парами также ставится запятая.
HREF Определяет URL-адрес ссылки. Относительные адреса задаются относительно документа, содержащего тэг <МАР>, а не документа, имеющего атрибут USEMAP (если это разные документы). Если в этом же документе используется тэг <BASE>, адресация рассчитывается относительно URL, указанного в этом тэге.
NOHREF Указывает нечувствительную зону, т.е. зону, не связанную с другими документами или ресурсами. Атрибуты NOHREF и HREF взаимоисключающие.

    На листинге 10.2 приведен пример определения изображения-карты при помощи HTML. Рис. 10.7 показывает его интерпретацию программой Internet Explorer.

Листинг 10.2. Пример определения изображения-карты.

Рис. 10.7. Пример изображения-карты, обслуживаемой браузером.

    В последней строке листинга показано, как ссылаться на изображение-карту:

<IМС SRC mymap.gif USEMAP=#mymap>

    Этот тэг загружает изображение MYMAP.GIF Атрибут USEMAP указывает на имя определения изображения-карты, которое было присвоено при помощи атрибута NAME тэга <MAP>.

Комбинирование изображений-карт обоих типов.
    Если вы решите позаботиться о пользователях, браузеры которых не поддерживают изображения-карты, и о сокращении трафика для пользователей более совершенных программ просмотра, вы можете комбинировать оба типа изображений-карт, используя преимущества каждого.
    Для этого нужно создать комбинированный файл-определение:

<А HREF="http://www.myserver.com/cgi-bin/mymap.map">
<IMG SRC=mymap.gif USEMAP=#mymap ISMAP>
</А>

    Если браузер поддерживает изображения-карты в клиентском варианте, то он использует указание атрибута USEMAP. В противном случае браузер воспользуется услугами сервера.

Примечание:
    Если вы хотите создать клиентский вариант изображения-карты, но не хотите или не можете создать изображение-карту, обслуживаемую сервером, можно воспользоваться такой альтернативой:

<А HREF=textmenu.html><IMG SRC=mymap.gif USEMAP=#mymap></A>

    Пользователь увидит изображение независимо от того, поддерживает его браузер изображения-карты или нет. Если не поддерживает, при щелчке на изображении появится текстовое меню, из которого можно будет сделать выбор.

Работа с программами, создающими изображения-карты.
    Как было упомянуто выше, при создании изображений-карт можно идти трудным или легким путем. Легкий путь заключается в использовании одной из специализированных программ, позволяющих осуществлять разметку чувствительных зон непосредственно на изображении, выбранном пользователем в качестве основы для изображения-карты.
    Существует несколько подобных программ-редакторов как для платформы Windows, так и для платформы Macintosh. Их основные функции весьма схожи. Все они поддерживают три главных типа зон: rect, poly и, circle. Некоторые из числа более совершенных работают также с точечной зоной и зоной по умолчанию. Вашим главным критерием при выборе программы-редактора должно стать удобство интерфейса, так как функциональные возможности не имеют сильных различий.

Совет:
    Вы можете добавить неподдерживаемые редактором типы зон при помощи ручного редактирования файла, определяющего изображение-карту.

Работа с редактором Mapedit.
    Mapedit – это условно-бесплатная программа для редактирования изображений-карт, работающая в Windows 9x и UNIX. Ее копию можно получить по адресу: http://www.boutell.com/mapedit. Она была создана Томасом Боутеллом (Thomas Boutell), специалистом в области разработки и поддержки файлов FAQ связанных с функционированием WWW. Эта программа позволяет создавать файлы-определения как в формате CERN, так и в формате NCSA и поддерживает основные формы зон за исключением точечной.
    Работа с Mapedit не вызовет у вас затруднений. Для того чтобы создать файл, определяющий изображение-карту, выберите в меню File пункт Open/Create. Откроется диалоговое окно для указания графического файла, который вы будете использовать в качестве основы. Чтобы найти его на диске, можно воспользоваться кнопкой Browse Программа поддерживает графические форматы GIF, JPEG и PNG.

Примечание:
    PNG является новым форматом, весьма схожим с GIF. Он основан на сжатии без потерь, при использовании которого все детали изображения сохраняются полностью. Преимуществом этого формата по отношению к GIF является тот факт, что им можно пользоваться свободно, не думая о нарушении авторских прав. Кроме того, PNG имеет несколько технологических новшеств, например, загрузка чересстрочных изображений происходит быстрее, чем таких же изображений формата GIF. Однако многие программы просмотра, включая Internet Explorer, пока не поддерживают этот формат.

    Для того чтобы отредактировать уже существующий файл-определение, нужно в том же диалоговом окне ввести его имя или найти его, прижав кнопку Browse (рис. 10.8). Чтобы создать новый файл, необходимо указать его имя (с расширением .МАР). Также не забудьте определить формат будущего файла при помощи соответствующих кнопок.
 
Рис. 10.8. Если вы хотите создать или отредактировать файл-определение при помощи Mapedit, нужно заполнить поля специального диалогового окна.

    После нажатия кнопки ОК исходное изображение будет загружено в окно программы. В случае необходимости для просмотра всего изображения можно использовать полосу прокрутки.

Примечание:
Если вам покажется, что графика выглядит несколько странно, не беспокойтесь. Ведь главная задача программы – компоновка и определение чувствительных зон, а не редактирование изображения.

    Вы можете создать любое количество зон разных типов, используя опции меню Tools. Пользователям, имеющим опыт работы с графическими редакторами и другими редакторами изображений-карт, интерфейс Mapedit может показаться несколько противоестественным (табл. 10.2). Большинство других редакторов позволяет создать зону и перетащить ее при помощи мыши на изображение. Подобная операция в Mapedit требует нескольких дополнительных нажатий кнопки мыши. К тому же, поместив зону на изображение, вы не сможете в этой программе удалить ее.

Таблица 10.2. Типы чувствительных зон программы Mapedit и методы их создания.
Тип зоны Метод создания
Circle Щелкните левой кнопкой мыши для того, чтобы обозначить центр круга. При помощи мыши укажите точку на окружности (т. е. Радиус), щелкнув на ней правой кнопкой.
Rectangle Щелкните левой кнопкой мыши для указания одного из углов прямоугольника. Используйте мышь для определения размеров (диагонали), щелкнув правой кнопкой на углу, противоположном первому.
Polygon Щелкните левой кнопкой мыши для указания первого угла многоугольника. Повторите эту операцию для каждого следующего угла. Замкните фигуру, щелкнув правой кнопкой на первом указанном вами углу.

    Программа Mapedit работает чересчур прямолинейно. Если выбрана какая-либо опция из меню Tools, она остается активной до указания другой опции этого меню. Так, если вы только что определили URL для прямоугольной зоны, следующей зоной будет зона того же типа. Или если вы выбрали пункт меню Test+Edit, вы останетесь в этом режиме до нового указания типа зоны.
    После того как вы создадите чувствительную зону, появится окно для указания соответствующего ей URL-aдpeca (рис. 10.9). Адрес нужно ввести в верхнее текстовое поле. Можно также для всего изображения-карты определить адрес по умолчанию, выбрав в меню File пункт Edit Default URL.
    Как уже было указано, качество вывода изображений в программе далеко от идеального, хотя есть возможность изменить цвет зон при помощи пункта Edit Hotspot Color меню File.

Рис. 10.9. После того как чувствительная зона создана, Mapedit просит указать соответствующий ей URL-адрес.

Совет:
    Если в создании зоны допущена ошибка, аннулировать зону можно двумя путями. Для этого нужно либо нажать клавишу Escape во время указания размеров зоны, либо нажать кнопку Cancel в окне для определения URL-адреса.

    Программа Mapedit позволяет протестировать созданные вами зоны. Для этого выберите пункт Test+Edit меню Tools. Когда вы щёлкнете левой кнопкой мыши на зоне, появится приписанный ей URL-адрес. Такая проверка не требует участия сервера или программы просмотра.
    Для сохранения созданного файла-определения выберите пункт Save или Save As меню File.

Примечание:
    Программа Mapedit по умолчанию не дает имени файла определенного расширения, поэтому вы должны позаботиться об этом сами. Большинство серверов работают с расширением .МАР.

    Mapedit позволяет легко изменять положение чувствительной зоны. Для такого действия выберите опцию Move меню Tools. Затем щелкните на зоне, которую хотите переместить. Появятся "контрольные точки". Захватив мышью одну из пограничных точек, можно изменить размеры зоны. Центральную точку можно использовать для перемещения зоны целиком. Таким образом в случае необходимости можно точно отрегулировать положение, форму и размеры чувствительной зоны.
    Форма и размеры многоугольной зоны могут быть отрегулированы добавлением или удалением контрольных точек. Для этого воспользуйтесь пунктами Add Points или Remove Points меню Tools. Эти опции активны только при работе с многоугольными зонами. Если вы хотите добавить еще один угол, щёлкните на многоугольнике и укажите примерное место для новой точки. Если хотите удалить точку, аналогично выберите ее указателем мыши.
    Программа Mapedit может использоваться и для создания изображений-карт, обслуживаемых непосредственно программой просмотра. В этом случае вместо МАР-файла нужно подготовить файл HTML. Программа отыщет все файлы HTML, содержащие графику, и выведет их имена в диалоговом окне, показанном на рис. 10.10. После выбора нужного изображения программа поместит его имя в диалоговое окно Select Inline Image. Подтвердив это имя, вы можете начать работу с зонами, как было описано выше. Результат этой работы будет сохранен в формате HTML.

Рис. 10.10. Для создания изображения-карты, обслуживаемой браузером, выберите нужное базовое изображение.

Работа с программой WebMap.
WebMap -это мощное средство редактирования изображений-карт для платформы Macintosh. WebMap позволяет создавать чувствительные зоны всевозможных типов, начиная от кругов и эллипсов и кончая многоугольниками и точками. Программа создает файлы-определения в форматах CERN, NCSA и МасНТТР. Изменение позиции, размеров и формы зоны при помощи WebMap не вызовет у нас никаких затруднений.

Рис. 10.11. Альтернативным способом создания прозрачной графики в формате GIF является заполнение фона изображения цветом, одинаковым с цветом фона Web-страницы (в этом примере – белым).

    Интерфейс программы хорошо продуман и удобен в работе. Для создания нового файла-определения выберите в меню File, а затем New. Используя Мас File Selector, найдите файл с исходной графикой. Формат файла может быть GIF или PICT.
    При помощи плавающей панели инструментов вы можете создать любое количество зон различных форм и размеров (рис. 10.11). Программа работает аналогично обычному графическому редактору (табл. 10.3). Если вы допустите какую-либо ошибку, ее будет легко исправить.

Таблица 10.3. Типы чувствительных зон программы WebMap и методы их создания.
Тип зоны Метод создания
Circle Нажмите кнопку мыши, не отпуская ее, укажите нужный размер квадрата, в который будет вписана окружность, и отпустите кнопку.
Ellipse Нажмите кнопку мыши, не отпуская ее, укажите нужный размер прямоугольника, в который будет вписан эллипс, и отпустите кнопку.
Rectangle Нажмите кнопку мыши, не отпуская ее, укажите нужный размер прямоугольника, затем отпустите кнопку.
Polygon Щелкните мышью на месте первой вершины многоугольника. Повторите эту операцию для всех остальных вершин. Для замыкания фигуры щелкните мышью поблизости от первой вершины.

Предупреждение:
    При помощи WebMap вы не можете создать зону меньшего размера в пределах зоны большего размера. Однако обратная операция возможна, поэтому будьте внимательны. Рекомендуется начинать с размещения маленьких зон и заканчивать большими зонами.

    После создания зон сохраните файл-определение. Файл по умолчанию получит расширение. М, характерное для формата МасНТТР. Для указания расширения, принятого для большинства Web-серверов, выберите пункт Ехport As Text в меню File и укажите формат CERN либо NCSA.

Предупреждение:
    WebMap предполагает, что файл-определение имеет то же имя, что и файл графики для изображения-карты. Поэтому, если вы захотите переименовать один из файлов, необходимо дать такое же имя и второму. В противном случае при попытке отредактировать существующий файл-определение программа создаст новый файл.

Совет:
    Иногда команда Undo программы WebMap не работает. Если вы хотите удалить зону, а команда Undo не может этого сделать, воспользуйтесь опцией Clear. Для этого на панели инструментов нажмите кнопку со стрелкой, отметьте мышью зону, которую хотите удалить, затем в меню Edit выберите пункт Clear.

Альтернативы страницам с изображениями-картами.
    Нежелание использовать изображения-карты может иметь различные причины. Возможно, ваш сервер не поддерживает CGI-скрипты, а вы не хотите разочаровывать пользователей, работающих со старыми браузерами. Может быть, вы не хотите исключать из числа своих читателей пользователей текстовых программ просмотра. Тогда у вас есть три возможности для создания альтернативы изображению-карте:

Фрагментирование изображения.
    При помощи графического редактора нетрудно разделить графику, являющуюся основой изображения-карты, на отдельные фрагменты и связать каждый из них с определенным URL-адресом.
Например, если вы разделите изображение размером 100х100 на четыре фрагмента 50х50 каждый, вы можете встроить их в HTML-документ при помощи кода, показанного на листинге 10.3.

Листинг 10.3. Пример изображения-карты, собранной из четырёх фрагментов.

    Программа просмотра при отображении приведенного кода покажет единое большое изображение.
Однако каждый фрагмент будет связан с отдельным URL-адресом. Заметьте, что необходимо точно указать размеры фрагментов и отключить рамки.

Совет:
    Для этой же цели удобно использовать таблицы HTML.

Использование текста.
    Конечно, текст не может полноценно заменить изображение-карту или другую графику. Однако не нужно забывать о пользователях текстовых программ просмотра и о читателях, имеющих медленные модемы или отключающих вывод изображений для экономии времени.
    Путей работы с этой категорией пользователей немало. Вы можете написать текстовый аналог, сделав на него ссылку с вашей главной страницы. Вы можете продублировать графические ссылки обычными текстовыми, расположив их вверху и внизу страницы. Имейте это в виду и не уменьшайте вашу потенциальную аудиторию.

Практический пример создания изображения-карты.
    Теперь пришло время закрепить полученные знания практическим примером. Построим изображение-карту в виде панели инструментов. В процессе работы вы можете использовать любые готовые или собственноручно созданные изображения. Придерживайтесь следующей последовательности действий:

Рис. 10.12. Текст под графикой помогает понять предназначение каждой ссылки.

Листинг 10.4. Пример файла, определяющего изображение-карту.

Рис. 10.13. Панель инструментов может быть размещена вверху или внизу страницы.

    Теперь добавьте приведенную ниже строку к коду вашего НТМL-файла. Замените www.myserver.com/cgi-bin на путь к программе, обслуживающей изображения-карты на вашем сервере. В случае необходимости уточните путь у системного администратора.

<А HREF="http://www.myserver.com/cgi–bin/imagemap.map">
<IMG SRC=imagemap.gif ISMAP></A>

    Помните, что при помощи того же редактора можно легко создать и изображение-карту, обслуживаемую программой-клиентом (браузером). На рис. 10.13 показан окончательный вид панели инструментов.